<template>
	<view class="content">
		<!-- 地址 、搜索框 -->
		<view class="search-box-wrapper p20">
			<view class="city-box">
				<view class="city-name">
					北京
				</view>
				<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/arrow-down.png" class="city-icon" />
			</view>

			<view class="input-box">
				<view class="search-input">
					<input class="uni-input" confirm-type="search" placeholder="请输入专家姓名、领域等" />
				</view>
				<image class="search-icon" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/search.png" />
			</view>
		</view>

		<!-- banner -->
		<view class="banner p20">
			<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583583955022&di=5197eac8af9c43d82ebf133da3b792b4&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0173ee5a8fbc70a8012045b3273177.jpg%401280w_1l_2o_100sh.jpg"></image>
		</view>

		<!-- quick enters -->
		<view class="quick-enters p20">
			<view class="quick-item" v-for="(item, index) in quickEnters" :key="index">
				<image class="quick-item-image" :src="item.icon" mode=""></image>
				<view class="quick-item-title">
					{{item.title}}
				</view>
				<view class="quick-item-desc">
					{{item.desc}}
				</view>
			</view>
		</view>

		<!-- 领域专家列表 -->
		<view class="exports">
			<ss-scroll-navbar :navArr="navList" :tabCurrentIndex="currentIndex1" @navbarTap="navbarTapHandler1">

			</ss-scroll-navbar>

			<view class="p20">
				<view class="export-item" v-for="(d, index) in experts" :key="index">
					<image class="expert-icon" :src="d.icon" mode="aspectFit"></image>
					<view class="export-item-info">
						<view class="export-name">
							{{d.name}}
						</view>
						<view class="export-item-vips">
							<uni-tag text="已认证" :circle="true"></uni-tag>
							<uni-tag text="业内专家" :circle="true"></uni-tag>
							<uni-tag text="特邀" :circle="true"></uni-tag>
						</view>

						<view class="export-desc">
							领域 ：{{d.fields}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- fix 提示登录 -->
		<view class="tip-login" v-if="hasLogin==false">
			<view class="tip-login-box">
				<image class="tip-login-img" src="https://www.innovationgloble.com/wxs/img/wx/login-tip.png">

				</image>
				<image class="tip-login-btn" src="https://www.innovationgloble.com/wxs/img/wx/login-btn.png" mode=""></image>
				<button @getuserinfo="getuserinfo" open-type="getUserInfo" plain="true" class="tip-login-action-btn"></button>
			</view>
		</view>
	</view>
</template>

<script>
	import ssScrollNavbar from '@/components/ss-scroll-navbar/ss-scroll-navbar.vue'
	import uniTag from "@/components/uni-tag/uni-tag.vue"
	import {
		mapState,
		mapMutations
	} from 'vuex';

	export default {
		components: {
			ssScrollNavbar,
			uniTag
		},
		data() {
			return {
				quickEnters: [{
					title: '图文资询',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/tuwen.png',
					desc: '在线沟通'
				}, {
					title: '电话咨询',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/dianhuazixun.png',
					desc: '实时通话'
				}, {
					title: '专家在线',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/export-online.png',
					desc: '权威专业'
				}, {
					title: '经纪人在线',
					icon: 'https://www.innovationgloble.com/wxs/img/wx/gkxcx/img/export/jingjiren.png',
					desc: '委托合作'
				}],
				currentIndex1: 0,
				navList: [{
					title: '电子信息',
					url: '关注'
				}, {
					title: '航空航天',
					url: '推荐'
				}, {
					title: '先进制造',
					url: '视频'
				}, {
					title: '生物医药',
					url: '武汉'
				}],
				experts: [{
					name: '张志刚',
					fields: '城市发展建设、大数据分析',
					icon: 'http://qnimage.xiteng.com/macvonexpert_01.jpg'
				}, {
					name: '赵亮',
					fields: '电子信息、软件设计',
					icon: 'http://qnimage.xiteng.com/macvonexpert_06.jpg'
				}, {
					name: '王大陆',
					fields: '城市发展建设、大数据分析、软件设计',
					icon: 'http://qnimage.xiteng.com/macvonexpert_07.png'
				}]
			}
		},
		onLoad() {
			this.silentLogin(params => {
				this.setCode(params);
			})
		},

		computed: {
			...mapState('userStore', ['hasLogin', 'userInfo']),
		},
		methods: {
			...mapMutations('userStore', ['saveUserInfo']),
			setCode(params) {
				this.$request.get({
					url: 'setWXCode',
					data: params,
				}).then(info => {
					this.saveUserInfo(info);
				}, res => {});
			},
			silentLogin(cb) {
				let that = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								that.rawData = JSON.parse(infoRes.rawData);
								if (cb) {
									const params = {
										...JSON.parse(infoRes.rawData),
										code: loginRes.code
									}
									cb(params);
								}
							}
						});
					}
				});
			},
			navbarTapHandler1(index) {
				this.currentIndex1 = index;
				var obj = this.navList[index];
			},
			getuserinfo(e) {
				this.silentLogin(params => {
					this.setCode(params);
				})
			}
		}
		
	}
</script>

<style>
	.tip-login-box {
		position: relative;
	}

	.tip-login-action-btn {
		border: none !important;
		position: absolute;
		left: 0upx;
		right: 0upx;
		top: 0upx;
		bottom: 0upx;
		/* width: 92upx;
		height: 92upx; */
	}

	.tip-login-btn {
		position: absolute;
		right: 40upx;
		top: 42upx;
		bottom: 32upx;
		width: 92upx;
		height: 92upx;

	}

	.tip-login {
		position: fixed;
		bottom: 0upx;
		left: 0;
		right: 0;
		height: 174upx;
		/* background-color: #268CFF; */
	}

	.tip-login-img {
		object-fit: cover;
		display: flex;
		height: 174upx;
		width: 100%;
		margin: auto;
	}

	.export-item-vips {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.export-item-info {
		margin-left: 28upx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.expert-icon {
		width: 120upx;
		height: 120upx;
		border-radius: 50%;
		object-fit: cover;
		background-color: #F5F5F5;
	}

	.export-desc {
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.export-item {
		display: flex;
		flex-direction: row;
		padding: 40upx 30upx;
		box-sizing: border-box;
	}

	.exports {

		margin-top: 20upx;
	}

	.quick-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.quick-item-desc {
		margin-top: 16upx;
		font-size: 24upx;
		color: #CCCCCC;
	}

	.quick-item-title {
		margin-top: 16upx;
		font-size: 28upx;
		color: #48526B;
	}

	.quick-item-image {
		width: 88upx;
		height: 88upx;
	}

	.quick-enters {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.content {
		/* padding: 20upx 30upx; 
		box-sizing: border-box; */
	}

	.p20 {
		padding: 20upx 30upx;
		box-sizing: border-box;
	}

	.banner {
		width: 100%;
		height: 260upx;
		margin: 0 auto;
		/* background: rgba(187, 187, 187, 0.2); */

		margin-top: 30upx;
		object-fit: cover;

		display: flex;
		justify-content: center;
		align-items: center;
	}

	.banner>image {
		width: 100%;
		height: 260upx;
		object-fit: cover;
		border-radius: 16px;
	}

	.search-box-wrapper {
		/* height: 40upx; */
		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.city-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 120upx;
		/* background-color: #007AFF; */
	}

	.city-icon {
		width: 48upx;
		height: 28upx;
	}

	.city-name {
		font-size: 30upx;
		color: #48526B;
		margin-right: 10upx;
	}



	.input-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		flex: 1;
		/* width:50%; */
		/* height:32px; */
		background: rgba(245, 245, 245, 1);
		border-radius: 60upx;
		padding: 20upx 30upx;
		box-sizing: border-box;
	}

	.uni-input {
		font-size: 28upx;
	}

	.search-icon {
		width: 32upx;
		height: 32upx;
	}
</style>
